<template>
    <div style="overflow: auto;height: 100%;width: 100%">
        <div id="header">
        <div style="background-color: #8f000b; height: 110px;">
            <span style="width: 50%;height:100%;" ><img src="../../../static/img/scgsxy_logo.png" style="float: left; height:40%;padding: 2% "/></span>
            <span style="width: 50%;height:100%;" ><img src="../../../static/img/pkucloud1h100.png" style="float: right;height:50%;"/></span>
        </div>
        <div class="app1">
            <el-menu :default-active="active" class="el-menu-demo" mode="horizontal" active-text-color="#8f000b">
                <el-menu-item style="width: 7rem  ;" index="1"><router-link :to="{name:'Home-page'}">首页</router-link></el-menu-item>
                <el-menu-item style="width: 7rem ; " index="2"><router-link :to="{name:'Competition-dynamics'}">竞赛动态</router-link></el-menu-item>
                <el-menu-item style="width: 7rem  ;" index="3"><router-link :to="{name:'Success-competition'}">竞赛佳绩</router-link></el-menu-item>
                <el-menu-item style="width: 7rem  ;" index="7"><router-link :to="{name:'About-us'}">获奖名单</router-link></el-menu-item>
                <el-menu-item  index="4" style="float: right; margin: auto 0;" v-if="!show_ind">
                    <router-link :to="{name:'Land'}"><el-button type="primary" plain @click="toLand">登录</el-button></router-link>
                    <router-link :to="{name:'Registe'}"><el-button type="danger" plain @click="toRegiste">注册</el-button></router-link>
                </el-menu-item>
                <!-- 已登录组件 -->
                <el-submenu index="6" style="float: right; " v-if="show_ind">
                    <template slot="title">欢迎您！{{schoolNum}}</template>
                    <el-menu-item index="6-1"  style="width: 20px"><router-link :to="{name:'PersonalInfo'}">设置</router-link></el-menu-item>
                </el-submenu>
                <el-submenu index="5" style="float: right;" v-if="show_ind">
                    <template slot="title">我的</template>
                    <el-menu-item index="5-1" style="width: 10px"><router-link :to="{name:'Mygame'}">比赛</router-link></el-menu-item>
                    <el-menu-item index="5-2"  style="width: 10px"><router-link :to="{name:'Personal-achievement'}">获奖</router-link></el-menu-item>
                </el-submenu>
                    <el-menu-item index="4" style=" float: right;" v-if="show_ind "><el-button type="danger" plain @click="logout" >退出</el-button></el-menu-item>
            </el-menu>
        </div>
    </div>
        <div class="footer1" style="padding: 0; background-color: white; z-index: -1;">
        <div id="_img" style="position: relative; height: 60px;">
            <div id="_img1" style="overflow: hidden;">
                <ul><li>
                    <img src="../../../static/img/wave_01.png" style="animation: move_wave 80s infinite;">//1
                    <img  src="../../../static/img/wave_01.png" style="animation: move_wave 80s infinite;">
                </li></ul>

            </div>
            <div id="_img2" style="overflow: hidden;">
                <ul><li>
                    <img src="../../../static/img/wave_02.png" style="animation: move_wave 50s infinite;">
                    <img src="../../../static/img/wave_02.png" style="animation: move_wave 50s infinite;">
                </li></ul>
            </div>
        </div>
        <div style="background-color: rgb(0,159,217);">
            <div style="width: 80%; margin: 0 auto;">
                <div class="fot-l"> 成都校区：四川省成都市郫都区团结镇学院街65号 邮编：611745<br>
                    眉山校区：眉山市眉州大道岷东段9号 邮编：620000<br>
                    联系电话&nbsp;&nbsp;&nbsp;&nbsp;招办：(028)87953080 校办:(028)87953896 人事处：(028)87953900 后勤处：(028)87953092<br>
                    Email：yb@stbu.edu.cn&nbsp;&nbsp; <br>
                    技术支持：四川工商学院1205
                </div>
                <div class="font-r">
                    <ul id="_footer_ul">
                        <li style="margin-left: 0;"> <span><img src="../../../static/img/weixin.jpg" width="100%" height="100%" ></span> <i>微信</i> </li>
                        <li> <span><img src="../../../static/img/QQ.jpg" width="100%" height="100%"></span> <i>QQ智慧校园</i> </li>
                        <li> <span><img src="../../../static/img/weibo.jpg" width="100%" height="100%"></span> <i>微博</i> </li>
                        <li> <span><img  src="../../../static/img/vr.png" width="100%" height="100%"></span> <i>VR工商</i> </li>
                    </ul>
                </div>
            </div>
            <br>
        </div>
    </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                //
                active:'',
                show_ind: false,
                schoolNum: '',
            }
        },

        methods: {
            toLand(){
                this.$router.push({name:'Land'})
            },
            toRegiste() {
                this.$router.push({name: 'Registe' })
            },
            logout(){
                var storage=window.localStorage;
                storage.clear();
                this.$router.push( '/home-page' );
                if(!window.localStorage){
                    alert("浏览器支持localstorage");
                }else{
                    var storage=window.localStorage;
                    //第三种方法读取
                    this.schoolNum=storage.getItem("username");
                    console.log(this.schoolNum);
                    if(this.schoolNum==null)
                        this.show_ind=false;
                }
            },
        },
        mounted() {
            if (this.$route.name == 'Home-page') this.active = '1';
            if (this.$route.name == 'Competition-dynamics') this.active = '2';
        },
        created() {
            if(!window.localStorage){
                alert("浏览器支持localstorage");
            }else{
                var storage=window.localStorage;
                //第三种方法读取
                this.schoolNum=storage.getItem("username");
                console.log(this.schoolNum);
                if(this.schoolNum!=null)
                    this.show_ind=true;
            }
        }
    }


</script>
<style>
    .app1 {
        font-family: 微软雅黑;
        text-align: center;
        font-size: 13px;
        content: "黑体";
    }
    @keyframes move_wave {
        0% {
            transform: translateX(0);
        }
        50% {
            transform: translateX(-30%);
        }
        100% {
            transform: translateX(0);
        }
    }
    #_img1 {
        height: 60px;
        width: 100%;
        position: absolute;
        z-index: 15;
    }
    #_img2 {
        height: 60px;
        width: 100%;
        position: absolute;
        z-index: 10;
    }
    #_img1>ul, #_img2>ul {
        padding: 0;
    }
    #_img1>ul>li, #_img2>ul>li {
        list-style-type: none;
    }
    #_footer_ul {
        list-style-type: none;
        padding: 0;
        margin: 10px 0;
        display: flex;
    }
    #_footer_ul li {
        list-style-type: none;
        width: 100px;
        height: 100px;
        margin: 0 10px;
        text-align:center;
    }
    .footer1{
        width: 100%;
        position: relative;
        top: 500px;
    }
</style>

